<template>
  <template v-if="visible">
    <a-modal
      v-model:visible="visible"
      :keyboard="keyboard"
      :mask-closable="maskClosable"
      ok-text="okText"
      cancel-text="cancelText"
      :wrap-class-name="wrapClassName"
      :destroy-on-close="true"
      :width="modalWidth"
      :force-render="true"
      @ok="onSubmitCallback"
      @cancel="onCloseCallback"
    >
      <!-- 标题信息 -->
      <template #title>
        <slot name="titleArea" />
      </template>

      <!-- 内容区域 -->
      <slot v-if="visible" name="contentArea" />

      <!-- 底部内容，当不需要默认底部按钮时， 可以设为 :footer="null" -->
      <template #footer>
        <div v-if="showFooter">
          <a-button @click.stop="onCloseCallback">取 消</a-button>
          <!-- 自定义操作区域 -->
          <slot name="footerArea" />
          <a-button type="primary" @click.stop="onSubmitCallback">确 定</a-button>
        </div>
      </template>
    </a-modal>
  </template>
</template>
<script setup lang="ts">
import { Modal } from "ant-design-vue"
interface Props {
  title?: string
  placement?: string
  size?: string
  readonly maskClosable?: boolean
  readonly keyboard?: boolean
  showFooter?: boolean
  okText?: string
  cancelText?: string
  fullModal?: string
  width?: string
}
const props = withDefaults(defineProps<Props>(), {
  title: "详情",
  placement: "right",
  maskClosable: false,
  keyboard: false,
  size: "large",
  showFooter: true,
  okText: "确认",
  cancelText: "取消",
  fullModal: "", //full-modal
  width: "50%",
})

const emits = defineEmits<{
  (e: "on-modal-ok"): void
  (e: "on-modal-cancel"): void
}>()

// //自定义包裹类名
const wrapClassName = computed(() => {
  return `${!props.showFooter ? "hider-modal-view-fooer" : ""} ${props.fullModal}`
})

//计算弹框的宽度
const modalWidth = computed(() => {
  return props.fullModal ? "100%" : props.width || "50%"
})

//弹框控制展示
const visible = ref<boolean>(false)

//外部调用该方法打开弹框
const setOpen = (): void => {
  visible.value = true
}

//外部调用该方法关闭弹框
const setCloes = (): void => {
  visible.value = false
}

//点击关闭icon | 点击按钮取消关闭弹框
const onCloseCallback = () => {
  console.log("onCloseCallback ...")
  visible.value = false
  emits("on-modal-cancel")
}

//提交触发父组件方法
const onSubmitCallback = () => {
  emits("on-modal-ok")
}

const setInfoPop = () => {
  Modal.info({
    title: "This is a notification message",
    content: h("div", {}, [h("p", "some messages...some messages..."), h("p", "some messages...some messages...")]),
    onOk() {
      console.log("ok")
    },
  })
}

const setSuccessPop = () => {
  Modal.success({
    title: "This is a success message",
    content: h("div", {}, [h("p", "some messages...some messages..."), h("p", "some messages...some messages...")]),
  })
}

const error = () => {
  Modal.error({
    title: "This is an error message",
    content: "some messages...some messages...",
  })
}

const warning = () => {
  Modal.warning({
    title: "This is a warning message",
    content: "some messages...some messages...",
  })
}

//暴露信息
defineExpose({
  setOpen,
  setCloes,
})
</script>

<style lang="less">
.ant-form {
  padding: 20px;
}
:deep(.full-modal) {
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
//隐藏底部栏
.hider-modal-view-fooer .ant-modal-footer {
  display: none;
}
.ant-modal-body {
  // padding: 0 !important;
}
.ant-modal-title {
  font-weight: bold;
}
</style>

<!-- 

  1. 样式问题
  2. footer设置问题
 -->
